<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('文件上传')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
                    </div>
                    <div class="ibox-content">
                    	<div class="form-group">
                            <label class="font-noraml">简单示例</label>
	                        <div class="file-loading">
					            <input class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
					        </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="font-noraml">多文件上传</label>
	                        <div class="file-loading">
					            <input  id="previewListEdit" th:value="${previewListEdit}"/>
					            <input name="file" id="fileinput-demo-1" type="file" multiple>
					        </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="font-noraml">相关参数详细信息</label>
                           
                            <div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
                        </div>
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
    var prefix = ctx + "/demo/form";    
    var initialPreview = [];
    var initialPreviewConfig = [];
    var str= document.getElementById("previewListEdit").value;
    var previewListEdit = eval("(" + str + ")");
    var goods_id=327;
   
     
        
      

    $(document).ready(function () {
    	for (var i = 0; i < previewListEdit.length; i++) {
            initialPreview.push(previewListEdit[i].url);
            var config = {caption: previewListEdit[i].fileName, filename: previewListEdit[i].fileName, downloadUrl:  previewListEdit[i].url, key:previewListEdit[i].key}
            initialPreviewConfig.push(config);
        }
    	$("#fileinput-demo-1").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': "/demo/form/uploadTest/" + goods_id,
            allowedFileExtensions: ['xls', 'xlsx', 'doc', 'docx', 'pdf', 'ppt', 'pptx', 'png', 'jpg'],//允许接收的文件后缀
            uploadAsync: false,  //默认异步上传
            showUpload: true,  //是否显示上传按钮
            showPreview : true, //是否显示预览
            showCaption: true, //是否显示标题
            showClose: true,    //是否显示关闭按钮
            removeClass: "btn btn-danger",
            enctype: 'multipart/form-data',
            maxFileCount:10,
            validateInitialCount:true,
            initialPreview: initialPreview,
            initialPreviewAsData: true,
            initialPreviewFileType: 'image',// 文件类型: 图片为images 其他为object
            initialPreviewConfig: initialPreviewConfig,
            deleteUrl: "/demo/form/deleteTest/",// 当初始化图片加载后点击删除图片会根据此url发起请求 参数为key
            overwriteInitial: false,
            previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
            previewFileIconSettings: {
                'docx': '<i ass="fa fa-file-word-o text-success"></i>',
                'doc': '<i ass="fa fa-file-word-o text-success"></i>',
                'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
                'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                'pptx': '<i class="fa fa-file-powerpoint-o text-success"></i>',
                'ppt': '<i class="fa fa-file-powerpoint-o text-success"></i>',
                'jpg': '<i class="fa fa-file-photo-o text-success"></i>',
                'pdf': '<i class="fa fa-file-archive-o text-success"></i>',
            }           
        });
    });
    </script>
</body>
</html>
